<template>
  <view class="page">
    <!-- #ifndef MP-WEIXIN-->
    <!-- <my-navbar leftText="账单详情" @leftClick="back"></my-navbar> -->
    <!-- #endif -->
    <hx-navbar ref="hxnb" :config="config" @clickBtn="Btn" />
    <view class="content">
      <view class="content-top">
        <text class="prop">原始单号:</text>
        <text>{{ data.related_order_sn }}</text>
        <div class="line"></div>
        <view class="box flex-btw">
          <text class="prop">单据类型</text>
          <text>{{ data.type == 1 ? "订单" : "退货单" }}</text>
        </view>
        <!-- <view class="flex-btw">
				<text class="prop">用户名称</text>
				<text>{{data.nickname}}</text>
			</view> -->
        <view class="box flex-btw" v-if="type == 1">
          <text class="prop">下单金额</text>
          <text style="color: #e84b4b">￥{{ data.order_money }}</text>
        </view>
        <view class="box flex-btw" v-if="data.type == 1">
          <text class="prop">配送金额</text>
          <text style="color: #e84b4b">￥{{ data.send_money }}</text>
        </view>
        <view class="box flex-btw" v-if="data.type == 2">
          <text class="prop">退货金额</text>
          <text style="color: #e84b4b">￥{{ data.send_money }}</text>
        </view>
        <view class="box flex-btw">
          <text class="prop">账单号</text>
          <text>{{ data.order_sn }}</text>
        </view>
        <view class="box flex-btw">
          <text class="prop">账期</text>
          <text>{{ data.payment_days }}</text>
        </view>
        <view class="box flex-btw">
          <text class="prop">账单金额</text>
          <text style="color: #e84b4b">￥{{ data.account_money }}</text>
        </view>
        <view class="box flex-btw">
          <text class="prop">差异金额</text>
          <text style="color: #e84b4b">￥{{ data.diff_money }}</text>
        </view>

        <view class="box flex-btw" v-if="type == 2">
          <text class="prop">应付金额</text>
          <text style="color: #e84b4b">￥{{ data.order_money }}</text>
        </view>
        <view class="box flex-btw" v-if="type == 2">
          <text class="prop">实付金额</text>
          <text style="color: #e84b4b">￥{{ data.collect_money }}</text>
        </view>
        <view class="box flex-btw" v-if="type == 2">
          <text class="prop">抹零金额</text>
          <text style="color: #e84b4b">￥{{ data.zero_money }}</text>
        </view>
        <view class="box flex-btw" v-if="type == 2">
          <text class="prop">未付金额</text>
          <text style="color: #e84b4b">￥{{ data.uncollected_money }}</text>
        </view>

        <view class="box flex-btw">
          <text class="prop">对账状态</text>
          <text>{{ data.account_status == 1 ? "已对账" : "未对账" }}</text>
        </view>
        <view class="box flex-btw" v-if="type == 1">
          <text class="prop">结算状态</text>
          <text v-if="data.status == 0" style="color: #e84b4b">未结算</text>
          <text v-else-if="data.status == 1" style="color: #67c23a"
            >已结算</text
          >
        </view>
        <view class="box flex-btw" v-else-if="type == 2">
          <text class="prop">结算状态</text>
          <text v-if="data.status == 0" style="color: #e84b4b">未结算</text>
          <text v-else-if="data.status == 1" style="color: #e6a23c"
            >部分结算</text
          >
          <text v-else-if="data.status == 2" style="color: #67c23a"
            >全部结算</text
          >
        </view>
      </view>

      <view class="good_info">
        <view class="title"> 商品信息 </view>
        <view class="sign_good" v-for="(item, index) in goodsList" :key="index">
          <view class="flex-middle top">
            <view class="imgs flex-middle">
              <img class="img" :src="item.img" mode="aspectFit" alt="" />
            </view>
            <text class="name">{{ item.goods_name }}</text>
            <text class="spu">{{ item.spu_name }}</text>
          </view>
          <view class="row">
            <text>对账数量：{{ item.account_num }}</text>
            <text v-if="data.type == 1">配送数量：{{ item.send_num }}</text>
            <text v-else>退货数量：{{ item.return_num }}</text>
          </view>
          <view class="row">
            <text>对账单价：￥{{ item.account_price }}</text>
            <text v-if="data.type == 1">配送单价：￥{{ item.send_price }}</text>
            <text v-else>退货单价：￥{{ item.return_price }}</text>
          </view>
          <view class="row">
            <text>对账金额：￥{{ item.account_money }}</text>
            <text v-if="data.type == 1">配送金额：￥{{ item.send_money }}</text>
            <text v-else>退货金额：￥{{ item.return_money }}</text>
          </view>
          <view
            >备注：<text class="note">{{ item.remark }}</text></view
          >
        </view>
      </view>
    </view>
    <view class="determine_button">
      <view class="determine flex-center" @click="exportAction">导出</view>
      <!-- #ifdef MP-WEIXIN -->
      <!-- <a ref="exp" href="" ></a> -->
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
import { $https } from "@/static/js/request.js";
export default {
  data() {
    return {
      data: {},
      goodsList: [], //商品列表
      type: null,

      config: {
        title: "账单详情",
        color: "#333333",
        fontSize: "18px",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#ffffff", "#ffffff"]],
        // 滑动屏幕后切换颜色，注意颜色为数组时长度必须一样，还有使用滑动切换必须监听 onPageScroll 事件
        slideBackgroundColor: [1, ["#ffffff", "#ffffff"]],
        // 状态栏 ，数组则为滑动变色
        statusBarBackground: ["", "#ffffff"],
      },

      orderList: [
        {
          name: "单据类型",
          value: "type",
        },
        {
          name: "下单金额",
          value: "order_money",
        },
        {
          name: "配送金额",
          value: "send_money",
        },
        {
          name: "退货金额",
          value: "send_money",
        },
        {
          name: "账单号",
          value: "order_sn",
        },
        {
          name: "账期",
          value: "payment_days",
        },
        {
          name: "账单金额",
          value: "account_money",
        },
        {
          name: "差异金额",
          value: "diff_money",
        },
        {
          name: "应付金额",
          value: "order_money",
          show: "2",
        },
        {
          name: "实付金额",
          value: "collect_money",
          show: "2",
        },
        {
          name: "抹零金额",
          value: "zero_money",
          show: "2",
        },
        {
          name: "未付金额",
          value: "uncollected_money",
          show: "2",
        },
        {
          name: "对账状态",
          value: "account_status",
        },
        {
          name: "结算状态",
          value: "status",
          show: "1",
        },
        {
          name: "结算状态",
          value: "status",
          show: "2",
        },
      ],
    };
  },
  onLoad(option) {
    this.type = option.type; //1：在线支付，2：货到付款
    $https(
      "GET",
      "getBillDetail",
      {
        id: option.id,
        type: option.type,
      },
      (res) => {
        if (res.data.errcode == 0) {
          var list = res.data.data;
          // var ms = Number(list.created_at+'000');
          // var now = new Date();
          // now.setTime(ms);
          // var date = now.getFullYear()+"-" + (now.getMonth()+1) + "-" + now.getDate()+ ' ' + now.getHours()+':'+now.getMinutes()+':'+now.getSeconds()
          // list.createdTime = date;
          this.goodsList = list.goods_info;
          this.data = list;
        } else {
          uni.showToast({
            title: res.data.errmsg,
            icon: "none",
          });
        }
      }
    );
  },
  methods: {
    //uni.request 的 reponseType不支持blob格式。。只能手写请求
    exportAction() {
      let pay_type = this.type, //1：在线支付，2：货到付款
        order_type = this.data.type, //1：订单 2：退货单
        addType = "" + pay_type + order_type,
        id = this.data.id,
        url,
        name;

      switch (addType) {
        case "11": {
          url = "export_online_info_order";
          name = "在线支付订单";
          break;
        }
        case "12": {
          url = "export_online_info";
          name = "在线支付退货单";
          break;
        }
        case "21": {
          url = "export_offline_info_order";
          name = "货到付款订单";
          break;
        }
        case "22": {
          url = "export_offline_info";
          name = "货到付款退货单";
          break;
        }
      }
      // #ifdef H5
      var xhr = new XMLHttpRequest();
      xhr.open("POST", getApp().globalData.rootUrl + "/partner/" + url);
      xhr.responseType = "blob";
      xhr.setRequestHeader("content-type", "application/json");
      xhr.setRequestHeader(
        "Authorization",
        uni.getStorageSync("copartner_token")
      );
      xhr.send(
        JSON.stringify({
          id,
        })
      );
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          const link = document.createElement("a");
          let blob = new Blob([xhr.response], {
            type: "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
          });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          link.download = name;
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        }
      };
      // #endif
      // #ifdef MP-WEIXIN
      wx.downloadFile({
        url: `${getApp().globalData.rootUrl}/partner/${url}?id=${id}`,
        header: {
          "Content-Type": "application/json",
          Authorization: uni.getStorageSync("copartner_token"),
        },
        success: (res) => {
          // console.log(res)
          wx.openDocument({
            filePath: res.tempFilePath,
            success: (result) => {
              console.log(result);
            },
          });
        },
      });

      // wx.request({
      // 	url: getApp().globalData.rootUrl + '/partner/'+ url, // 请求地址
      // 	data: {id},  // 请求参数
      // 	method: 'POST',
      // 	header: { // 根据自己需求设定
      // 	  'Content-Type': 'application/json',
      // 	  'Authorization': uni.getStorageSync("copartner_token"),
      // 	},
      // 	responseType: 'arraybuffer',
      // 	success:res=>{
      // 	      let blob = new Blob([xhr.response], {
      // 	        type:
      // 	          "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
      // 	      });
      // 		wx.navigateTo({
      // 			url:URL.createObjectURL(blob),
      // 		})
      // 	//       link.style.display = "none";
      // 	//       link.href = URL.createObjectURL(blob);
      // 	//       link.download = name;
      // 	//       link.click();
      // 	}
      // })
      // #endif
      // exportMethod(res, name) {
      //   let fileReader = new FileReader();
      //   fileReader.readAsText(res, "utf-8");
      // //   fileReader.readAsArrayBuffer(res);
      //   fileReader.onload = function() {
      //     try {
      // //       let jsonData = JSON.parse(this.result); // 说明是普通对象数据，后台转换失败+
      // //       if (jsonData.errcode) {
      // // 		console.log(jsonData.errmsg)
      // // //         Message.error(jsonData.errmsg);
      // //       }
      //     } catch (err) {
      //       const link = document.createElement("a");
      //       let blob = new Blob([res], {
      //         type:
      //           "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
      //       });
      //       link.style.display = "none";
      //       link.href = URL.createObjectURL(blob);
      //       link.download = name;
      //       document.body.appendChild(link);
      //       link.click();
      //       document.body.removeChild(link);
      //     }
      //   };
      // },
    },
    back() {
      // #ifdef H5
      window.history.back(-1);
      // #endif
      // #ifndef H5
      uni.navigateBack();
      // #endif
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  .content {
    // padding: 20rpx 30rpx 100rpx;
    font-family: PingFang SC;
    width: 100%;
    padding: 20rpx;

    &-top {
      width: 100%;
      padding: 30rpx;
      background: #fff;
      border-radius: 20rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
    }

    .line {
      width: 100%;
      height: 1rpx;
      background: #ececec;
      margin-top: 30rpx;
    }

    .box {
      margin-top: 16rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
    }

    .good_info {
      // padding-bottom: 40rpx;
      margin-top: 20rpx;
      padding: 20rpx;
      background: #fff;
      border-radius: 20rpx;

      .title {
        margin-bottom: 14rpx;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: bold;
      }

      .sign_good {
        font-size: 24rpx;
        background: #fff;
        border-radius: 14rpx;
        padding: 20rpx 40rpx;
        margin-top: 20rpx;

        + .sign_good {
          margin-top: 20rpx;
        }

        .top {
          margin-bottom: 20rpx;

          .imgs {
            width: 120rpx;
            height: 120rpx;
            position: relative;

            .logo {
              width: 40rpx;
              height: 40rpx;
              position: absolute;
              top: 0;
              left: 0;
              z-index: 1;
            }

            .img {
              width: 120rpx;
              max-height: 100rpx;
              margin-right: 40rpx;
            }
          }

          .name {
            margin-left: 20rpx;
          }
        }

        .row {
          margin-bottom: 20rpx;

          text:first-child {
            display: inline-block;
            width: 60%;
          }
        }

        .note {
          color: #9a9a9a;
        }

        .spu {
          margin-left: 20rpx;
          padding: 4rpx 8rpx;
          background: #f5f5f5;
          border-radius: 8rpx;
          font-size: 24rpx;
          transform: scale(0.8);
        }
      }
    }
  }

  // .export {
  //   background: #4fa388;
  //   color: #fff;
  //   width: 280rpx;
  //   padding: 20rpx;
  //   border-radius: 60rpx;
  //   position: fixed;
  //   bottom: 40rpx;
  //   left: 0;
  //   right: 0;
  //   margin: auto;
  // }

  .determine_button {
    padding: 0 0 5rpx 0;
    font-family: PingFang SC;

    .determine {
      width: 444rpx;
      margin: 10rpx auto;
      text-align: center;
      background: #40ae36;
      color: $white;
      border-radius: 36rpx;
      height: 72rpx;
      line-height: 72rpx;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
      margin-bottom: 20rpx;
    }
  }
}
/deep/.hx_text_overflow {
  font-family: PingFang SC;
  font-weight: bold;
}
</style>
